// import React, { Component, PureComponent } from "react";

// class Child extends PureComponent {
//   render() {
//     console.log("child render");
//     return <div>child组件</div>;
//   }
// }

// const obj = { a: 3 };
// class App extends Component {
//   state = {
//     count: 1,
//   };
//   handleClick = () => {
//     this.setState((prevState) => {
//       return {
//         count: prevState.count + 1,
//       };
//     });
//   };
//   fn = () => {
//     console.log(123);
//   };
//   render() {
//     return (
//       <>
//         <h2>useCallBack</h2>
//         <Child obj={obj} onMsg={this.fn} />
//         <p>{this.state.count}</p>
//         <button onClick={this.handleClick}>btn</button>
//       </>
//     );
//   }
// }

// export default App;

import React, { useState, memo } from "react";
import { useCallback } from "react";
// memo是一个高阶组件是给函数组件用的，相当于类组件的PureComponent
// useCallback用来缓存函数,让组件更新的时候，函数的地址可以保持不变

// 当一个函数要作为自定义事件传递给子组件的时候，需要加上useCallback

const Child = memo(() => {
  console.log("child render");
  return <div>child组件</div>;
});

const App = () => {
  const [count, setCount] = useState(1);
  const handleClick = () => {
    setCount((v) => v + 1);
  };
  const fn = useCallback(() => {
    console.log(123);
  }, []);
  // const fn = useMemo(
  //   () => () => {
  //     console.log(123);
  //   },
  //   []
  // );
  return (
    <>
      <h2>useCallback</h2>
      <Child onMsg={fn} />
      <p>{count}</p>
      <button onClick={handleClick}>btn</button>
    </>
  );
};

export default App;
